'use client';
import { useSession } from 'next-auth/react';
import { useRouter, usePathname } from 'next/navigation';
import { useEffect } from 'react';
import Link from 'next/link';
import { Shield, Users, CheckCircle, MessageSquare } from 'lucide-react';
const adminNavItems = [
{
href: '/admin/moderation',
label: 'Moderation',
icon: Shield,
description: 'Review reports and moderate content',
},
{
href: '/admin/users',
label: 'Users',
icon: Users,
description: 'Manage users, bans, and roles',
},
{
href: '/admin/mp-verification',
label: 'MP Verification',
icon: CheckCircle,
description: 'Verify MP account claims',
},
{
href: '/admin/feedback',
label: 'Feedback',
icon: MessageSquare,
description: 'View user feedback submissions',
},
];
export default function AdminLayout({ children }: { children: React.ReactNode }) {
const { data: session, status } = useSession();
const router = useRouter();
const pathname = usePathname();
// Check for admin/moderator access
useEffect(() => {
if (status === 'loading') return;
if (!session?.user) {
router.push('/auth/login?next=/admin');
return;
}
// Check if user has admin or moderator access
if (!session.user.isAdmin && !session.user.isModerator) {
router.push('/');
return;
}
}, [session, status, router]);
if (status === 'loading') {
return (
<div className="container mx-auto px-4 py-8">
<div className="text-center py-12">
<p className="text-text-secondary">Loading...</p>
</div>
</div>
);
}
if (!session?.user || (!session.user.isAdmin && !session.user.isModerator)) {
return null;
}
// Extract locale from pathname
const pathParts = pathname.split('/');
const locale = pathParts[1] || 'en';
return (
<div className="min-h-screen bg-background-primary">
{/* Admin Header */}
<div className="bg-background-secondary border-b border-border-primary">
<div className="container mx-auto px-4">
<div className="flex items-center justify-between py-4">
<div className="flex items-center gap-3">
<Shield size={24} className="text-accent-red" />
<div>
<h1 className="text-xl font-bold text-text-primary">Admin Panel</h1>
<p className="text-xs text-text-tertiary">
{session.user.isAdmin ? 'Administrator' : 'Moderator'} - {session.user.email}
</p>
</div>
</div>
<Link
href="/"
className="text-sm text-text-secondary hover:text-text-primary transition-colors"
>
Back to Site
</Link>
</div>
{/* Navigation */}
<nav className="flex gap-1 -mb-px overflow-x-auto">
{adminNavItems.map((item) => {
const fullHref = `/${locale}${item.href}`;
const isActive = pathname.includes(item.href);
const Icon = item.icon;
// Check if moderator can access this item
const isModeratorsAllowed = ['moderation', 'users', 'feedback'].some((path) =>
item.href.includes(path)
);
const canAccess = session.user.isAdmin || isModeratorsAllowed;
if (!canAccess) return null;
return (
<Link
key={item.href}
href={fullHref}
className={`
flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap
${
isActive
? 'border-accent-red text-accent-red'
: 'border-transparent text-text-secondary hover:text-text-primary hover:border-border-primary'
}
`}
>
<Icon size={18} />
{item.label}
</Link>
);
})}
</nav>
</div>
</div>
{/* Content */}
<main>{children}</main>
</div>
);
}
